<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
        }

        table td {
            border: 1px solid #ccc;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>
            使用创建dom节点动态生成表格
        </h1>
        <label for="">行</label>
        <input type="text" id="row">
        <label for="">列</label>
        <input type="text" id="col">
        <input type="button" id="btn" value="生成">
        <div id="output">
            <!-- <table>
                <tbody>
                    <tr>
                        <td>浮动法</td>
                    </tr>
                </tbody>
            </table> -->
        </div>
    </div>



    <script>
        //获取元素
        var btn = document.querySelector('#btn')
        var col = document.querySelector('#col')
        var row = document.querySelector('#row')
        var output = document.querySelector('#output')

        //绑定点击事件
        btn.onclick = function(){
            //获取行和列的数量
            var colNum = col.value
            var rowNum = row.value

            //创建 table tbody
            var table = document.createElement('table')
            var tbody = document.createElement('tbody')

            //把tbody 放入 table 中
            table.appendChild(tbody)

            //循环行数和列数生成表格
            for(var i = 0 ; i < rowNum ; i++){

                //外层循环一次，生成一个tr
                var tr = document.createElement('tr')

                // 隔行变色 判断的i的值是偶数还是奇数

                //里循环
                for(var j = 0 ; j < colNum ; j++){
                    
                    //里循环一次，生成一个td
                    var td = document.createElement('td')
                    var shanChu
                    //生成文字
                    td.innerHTML = '单元格' + i + j
                    //把td 放入 tr
                    tr.appendChild(td )
                }

                // 创建一个复制按钮
                var btnFZ = document.createElement('button')
                btnFZ.innerHTML = '复制'

                //把 btnFZ 放入 tr
                tr.appendChild(btnFZ)

                // 创建一个删除按钮
                var btnSC = document.createElement('button')
                btnSC.innerHTML = '删除'

                //把 btnSC 放入 tr
                tr.appendChild(btnSC)

                //绑定删除事件
                btnSC.onclick = function(){
                    this.parentElement.remove()
                }

                // 绑定复制点击事件
                btnFZ.onclick = function fuZhi(){
                    var res = this.parentElement.cloneNode(true)
                    tbody.appendChild(res)

                    //给复制出来的 添加复制效果
                    res.children[colNum].onclick = fuZhi 

                    res.lastElementChild.onclick = function () {
                    this.parentElement.remove()
                }

            }
            if (i % 2 !== 0) {
                    tr.style.background = '#ccc'
                }

                //把 tr 放入 tbody
                tbody.appendChild(tr)
            }
            //把table 放入 output 
            output.appendChild(table)
            
        }

    </script>
</body>
</html>